<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { fetchPrescriptionList } from '@/api/prescription.js'

// 用户数据列表
const userList = ref([])
// 搜索关键字
const searchName = ref('')
// 加载状态
const loading = ref(false)

// 获取数据方法
const getUserList = async () => {
  try {
    loading.value = true
    const params = { userName: searchName.value }
    const res = await fetchPrescriptionList(params)
    userList.value = res.data
  } catch (error) {
    ElMessage.error('数据获取失败')
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  getUserList()
}

// 性别显示转换
const formatGender = (gender) => {
  const genderMap = {
    '男': '男',
    '女': '女'
  }
  return genderMap[gender] || '未知'
}

// 初始化加载
onMounted(() => {
  getUserList()
})
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>用户诚信档案</span>
        <div class="search-container">
          <div class="search-wrapper">
            <span class="search-label">用户名称：</span>
            <el-input 
              v-model="searchName" 
              placeholder="请输入用户名" 
              class="search-input"
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon class="search-icon"><Search /></el-icon>
              </template>
              <template #append>
                <el-button 
                  type="primary" 
                  @click="handleSearch"
                >
                  搜索
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>
    </template>


    <el-table 
      v-loading="loading"
      :data="userList" 
      style="width: 100%"
      stripe
    >
      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="userName" label="用户名" width="120" />
      <el-table-column prop="userAge" label="年龄" width="80" />
      <el-table-column label="性别" width="80">
        <template #default="{ row }">
          {{ formatGender(row.userSex) }}
        </template>
      </el-table-column>
      <el-table-column prop="userPhone" label="联系电话" width="130" />
      <el-table-column prop="visitNumber" label="就诊次数" width="100" />
      <el-table-column prop="appointmentNumber" label="预约次数" width="100" />
      <el-table-column label="诚信等级" width="250">
        <template #default="{ row }">
          <el-rate
            :model-value="row.avgScore" 
            disabled
            show-score
            :max="10"
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            score-template="{value} 分"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .search-container {
      width: 100%;
      margin-top: 15px;

      .search-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        .search-label {
          font-size: 14px;
          color: #606266;
        }

        .search-input {
          width: 400px;
          
          :deep(.el-input-group__prefix) {
            padding: 0 10px;
          }
        }
      }
    }
  }
}
</style>